<template>
  <div class="sign-location">
    <!-- 导航栏 -->
    <div class="tab-bar">
      <van-nav-bar left-arrow @click-left="$router.go(-1)" :border="false">
        <span class="headline" slot="title">指定签署位置</span>
      </van-nav-bar>
      <span class="company">{{ title }}</span>
    </div>
    <!-- 合同模块 -->
    <div class="contract-img">
      <!-- <div
        class="doc-page-content"
        :id="index + 1"
        v-for="(item, index) in contractImg"
        :key="index"
      >
        <img :src="'data:image/png;base64,' + item" alt="" />
      </div> -->
    </div>
    <div class="select">
      <div class="select-name">
        <span
          v-for="(item, index) in radios"
          :key="index"
          :class="radio === index ? 'btn-span' : ''"
          @click="radio = index"
          >{{ item }}</span
        >
      </div>
      <!-- 底部按钮 -->
      <div class="sign-button">
        <span class="button-span" @click="signature">
          <van-icon
            class="icon-sketching"
            class-prefix="iconfont iconshouxieqianmingicon"
          />
          签名
        </span>
        <span class="button-span" @click="dateSigning">
          <van-icon
            class="icon-sketching"
            class-prefix="iconfont iconqianshuriqi"
          />
          签署日期
        </span>
        <van-button class="myButton" type="info" @click="sendFIle"
          >发送文件</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { addContractMessage } from '@/api/contract'
export default {
  data() {
    return {
      title: '北京华信云盛科技有限公司劳动合同',
      radios: ['张三', '北京华信云盛科技有限公司'],
      radio: 0,
      contractAllInfo: {}, // 合同信息
      fileList: [], // 模板签名文件列表
      signerOptions: [], // 参与人列表
      coords: {},
      curFile: {
        fileId: '',
        filePath: '',
        filePages: [],
        contractId: ''
      },
      contractId: '' // 合同id
    }
  },
  created() {
    this.contractId = this.$route.params.contractId
    this.infoList()
  },
  mounted() {},
  methods: {
    async infoList() {
      try {
        const { data: res } = await addContractMessage({
          contractId: this.$route.params.contractId
        })
        if (res.code !== '0') {
          return this.$toast.fail(res.msg)
        }
        this.contractAllInfo = res.data
        // 模板签名文件列表
        const tempFileArr = []
        for (const index in this.contractAllInfo.signingFileInfoList) {
          const item = this.contractAllInfo.signingFileInfoList[index]
          const file = {
            fileId: item.fileId,
            fileName: item.fileName,
            filePath: item.filePath,
            filePages: item.filePages
          }
          tempFileArr.push(file)
          this.failList = tempFileArr
        }
        // 参与人列表
        const tempFileArr1 = []
        for (const index in this.contractAllInfo.signatoryInfoList) {
          const item = this.contractAllInfo.signatoryInfoList[index]
          const option = { label: item.signerName, value: item.id }
          tempFileArr1.push(option)
        }
        this.signerOptions = tempFileArr1

        // 文件印章坐标
        console.log(this.contractAllInfo.signingFileCoordInfoList)
        if (
          this.contractAllInfo.signingFileCoordInfoList !== undefined &&
          this.contractAllInfo.signingFileCoordInfoList.length > 0
        ) {
          // 有坐标控件
          for (const j in this.contractAllInfo.signingFileCoordInfoList) {
            const JItem = this.contractAllInfo.signingFileCoordInfoList[j]
            const coord = {
              fileId: JItem.fileId,
              pageNum: JItem.filePageNumber,
              xcoord: JItem.xcoord,
              ycoord: JItem.ycoord,
              xper: JItem.xpercent,
              yper: JItem.ypercent,
              controlType: JItem.controlType,
              signer: JItem.signerId
            }
            this.coords.push(coord)
          }
        }
        console.log(this.coords)
        // 展示第一个文件
        this.curFile.contractId = this.contractId
        this.curFile.fileId = this.fileList[0].fileId
        this.curFile.filePath = this.fileList[0].filePath
        var pages = []
        for (let i = 0; i < this.fileList[0].filePath; i++) {
          pages.push(i + 1)
        }
        this.curFile.filePages = pages
      } catch (error) {
        console.log(error)
      }
    },
    // 签名
    signature() {},
    // 日期
    dateSigning() {},
    // 发送文件
    sendFIle() {}
  }
}
</script>

<style scoped lang="less">
.sign-location {
  padding: 172px 0 200px;
  .tab-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #fff;
    z-index: 33;
    .van-nav-bar {
      .headline {
        font-size: 34px;
        font-weight: bold;
      }
      /deep/.van-icon {
        font-size: 40px;
        color: #101010;
      }
    }
    /deep/.van-nav-bar__left {
      padding-left: 23px;
    }
    .company {
      font-size: 26px;
      display: block;
      box-sizing: border-box;
      height: 80px;
      line-height: 80px;
      padding-left: 41px;
      border-bottom: 1px solid #e0e0e0;
      color: #2c2c2c;
      background-color: #fff;
    }
  }
  // 合同
  .contract-img {
    height: 72vh;
    background-color: red;
    .doc-page-content {
      position: relative;
      img {
        border-bottom: 1px solid red;
        display: block;
        width: 100%;
      }
      /deep/.control-signseal {
        position: absolute;
        top: 3px;
        bottom: 0;
        border: 1px dashed rgb(0, 175, 161);
        img {
          display: block;
        }
      }
    }
  }
  .select {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #f8f8f8;
    .select-name {
      height: 80px;
      width: 100%;
      padding: 0 40px;
      display: flex;
      align-items: center;
      span {
        font-size: 24px;
        color: #666666;
        padding: 12px 16px;
        border-radius: 28px;
        margin-right: 10px;
      }
      .btn-span {
        background-color: #2489f2;
        color: #fff;
      }
    }
    // 按钮
    .sign-button {
      width: 100%;
      height: 120px;
      line-height: 120px;
      background-color: #fff;
      border-top: 1px solid #e0e0e0;
      .button-span {
        font-size: 24px;
        margin-left: 40px;
        .icon-sketching {
          font-size: 35px;
        }
        .iconfont {
          margin-right: 13px;
          vertical-align: middle;
        }
      }
      .myButton {
        float: right;
        margin-top: 20px;
        margin-right: 40px;
        width: 280px;
        height: 80px;
      }
    }
  }
}
</style>
